<template>
  <div>
    <el-button
      type="primary"
      @click="handleLoadData"
    >加载数据源</el-button>
    <el-button
      type="primary"
      @click="handleExportExcel"
    >导出excel</el-button>
    <virtual-table
      ref="virtual-table"
      :header-max-height="600"
      :header-cell-style="handleHeaderCellStyle"
      :main-cell-style="handleCellStyle"
      v-loading="loading"
    />
  </div>
</template>

<script>
import TableUtil from "./table-util";
import VirtualTable from "./virtual-table/index.vue";

export default {
  name: "Vxe-Grid6",

  components: {
    VirtualTable,
  },

  data() {
    return {
      loading: false,
    };
  },

  methods: {
    handleLoadData() {
      const tableData = this.calculate();
      this.loadTable(tableData);
    },

    calculate() {
      const tableUtil = new TableUtil();

      tableUtil.calculateMergeHeaderTable();
      tableUtil.calculateMergeMainTable();
      tableUtil.calculateNoMergeMainTable({ slots: this.renderMainSlots });
      tableUtil.mergeMainTableData();

      return tableUtil.getData();
    },

    renderMainSlots({ row, rowIndex, column, columnIndex }) {
      const render = () => {
        return "chenyingnb";
      };
      return [render()];
    },

    loadTable(tableData) {
      const instance = this.$refs["virtual-table"];
      instance.loadTable(tableData);
    },

    handleCellStyle({ row, rowIndex, column, columnIndex }) {
      const randomColor =
        "#" + Math.random().toString(16).substr(2, 6).toUpperCase();
      return columnIndex >= 3
        ? { backgroundColor: randomColor }
        : { backgroundColor: "#f4f5fa" };
    },

    handleHeaderCellStyle() {
      return {
        backgroundColor: "#f4f5fa",
      };
    },

    // 导出excel
    async handleExportExcel() {
      this.loading = true;
      const instance = this.$refs["virtual-table"];
      await instance.exportExcel();
      this.loading = false;
    },
  },
};
</script>

<style>
</style>